import React, { Component } from 'react';

class SetStatePage extends Component {
    constructor(props){
        super(props)
        this.state = {
            counter: 0
        }
    }
    componentDidMount(){
        this.changeValue(1)
        document.getElementById('test').addEventListener('click', this.setCounter)
    }
    // 避免视图重复渲染
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.counter !== this.state.counter
    }
    changeValue = v => {
        // setState在合成事件和生命周期中是异步的，这里说的异步其实是批量更新，达到优化性能的目的
        // this.setState({
        //     counter: this.state.counter + v
        // }, ()=>{
        //     // callback 就是 state 更新完成之后再执行
        //     console.log("counter", this.state.counter)
        // })
        // console.log("counter", this.state.counter)
        this.setState((state)=>{
            return {
                counter: state.counter + v
            }
        })
    }
    setCounter = v => {
        // state 的更新可能会合并(只执行最后一次)，使用 setState 函数方式可以处理
        // 异步执行
        this.changeValue(1)
        this.changeValue(2)
        this.changeValue(3)

        // setTimeout和原生事件中是同步执行
        // setTimeout(()=>{
        //     this.changeValue(1)
        // }, 0)
    }

    render() {
        return (
            <div>
                <h3> SetStatePage </h3>
                <button onClick={this.setCounter}>{ this.state.counter }</button>
                <button id="test">原生事件：{ this.state.counter }</button>
            </div>
        );
    }
}

export default SetStatePage;